<template>
  <div>
    <vxe-modal
        v-model="show" id="update" width="50%" height="80vh" :size="size" :position="{top: '10%'}"
        @close="closeForm()" @show="open" show-zoom="" resize="" transfer="" show-footer="">
      <!-- storage 将窗口拖动的状态保存到本地 remember 再次打开窗口时还原窗口状态-->
      <!--标题-->
      <template #title>
        <h3>字段 - 修改 </h3>
      </template>
      <!--主体-->
      <template #default>
        <el-form :size="size" ref="form" :model="form" class="form" :rules="rules" label-width="100px">
          <el-tabs v-model="activeName">
            <el-tab-pane label="基本配置" name="first">
              <!-- 基本信息 -->
              <el-row :gutter="10">
                <!-- 字段类型 -->
                <el-col :span="12">
                  <el-form-item prop="type">
                    <template slot="label">
                      <span>字段类型 </span>
                      <el-tooltip content="系统预设表单类型，如需要修改数据库表的数据类型，请点击数据库设置选项卡进行修改" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-select style="width:100%" v-model="form.type" @change="selectType" filterable placeholder="请选择">
                      <el-option v-for="(item,i) in field" :key="i" :label="item.name" :value="item.type"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 录入数据 -->
                <el-col :span="12">
                  <el-form-item prop="post_status">
                    <template slot="label">
                      <span>录入数据 </span>
                      <el-tooltip content="是否允许提交此字段的表单数据，以进行数据的添加和修改" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.post_status">
                      <el-radio-button :label="1">录入数据</el-radio-button>
                      <el-radio-button :label="0">不录入数据</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <!-- 字段标题 -->
                <el-col :span="12">
                  <el-form-item prop="title">
                    <template slot="label">
                      <span>字段标题 </span>
                      <el-tooltip content="设置为表单的标题和表格的列名" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="5" v-model="form.title" clearable placeholder="中文字段标题"/>
                  </el-form-item>
                </el-col>
                <!-- 字段名称 -->
                <el-col :span="12">
                  <el-form-item label="字段名称" prop="field">
                    <template slot="label">
                      <span>字段名称 </span>
                      <el-tooltip content="设置为数据库表的字段名称，注意需要符合数据库的命名规则" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="7" v-model="form.field" clearable placeholder="英文字段名称"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <!-- 数据库配置 -->
              <el-row :gutter="10">
                <!-- 创建字段 -->
                <el-col :span="12">
                  <el-form-item prop="create_table_field">
                    <template slot="label">
                      <span>创建字段 </span>
                      <el-tooltip content="是否创建数据库中表的对应字段，选择否即为虚拟字段" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.create_table_field">
                      <el-radio-button :label="1">创建字段</el-radio-button>
                      <el-radio-button :label="0">虚拟字段</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 所属表 -->
                <el-col :span="12">
                  <el-form-item prop="belong_table">
                    <template slot="label">
                      <span>所属表 </span>
                      <el-tooltip content="设置为虚拟字段后，可以设定此字段引用的是哪个表中的同名字段" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-select
                        tabindex="11" :disabled="form.create_table_field != '0'" @focus="getTablesByMenuId"
                        @change="setPostStatus" clearable v-model="form.belong_table" filterable placeholder="关联字段所属表（配置多表专属，其它勿设置）">
                      <el-option v-for="(item,i) in tableList" :key="i" :value="item.table_name">
                        {{ item.table_name }}({{ item.title }})
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <!-- 数据类型 -->
                <el-col :span="12">
                  <el-form-item prop="datatype">
                    <template slot="label">
                      <span>数据类型 </span>
                      <el-tooltip content="创建的数据库中表的字段的数据类型" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-select  tabindex="13" v-model="form.datatype" filterable @change="setFieldLength" placeholder="请选择" style="width: 100%;">
                      <el-option v-for="(item,i) in propertyField" :key="i" :label="item.name" :value="item.name"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 字段长度 -->
                <el-col :span="12">
                  <el-form-item prop="length">
                    <template slot="label">
                      <span>字段长度 </span>
                      <el-tooltip content="创建的数据库字段的长度" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="15" v-model="form.length" placeholder="字段长度"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <!-- 约束类型 -->
                <el-col :span="12">
                  <el-form-item prop="validate">
                    <template slot="label">
                      <span>约束类型 </span>
                      <el-tooltip content="设置表的约束类型" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-checkbox-group  v-model="form.validate" @change="checkDefault">
                      <el-checkbox-button label="notempty">非空</el-checkbox-button>
                      <el-checkbox-button label="unique">唯一</el-checkbox-button>
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <!-- 字段索引 -->
                <el-col :span="12">
                  <el-form-item prop="indexdata">
                    <template slot="label">
                      <span>字段索引 </span>
                      <el-tooltip content="为此字段创建索引，建议对经常需要查询的字段配置索引以提高性能" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.indexdata">
                      <el-radio-button label="index">普通索引</el-radio-button>
                      <el-radio-button label="unique">唯一索引</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <!-- 默认值 -->
                <el-col :span="12">
                  <el-form-item prop="default_value">
                    <template slot="label">
                      <span>默认值 </span>
                      <el-tooltip content="设置数据库表中的列的默认值" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="21" :disabled="[8,10,11,12,17,19,22,25,26,27,28,29,31,32,33,34,35].indexOf(form.type) != -1" v-model="form.default_value" clearable placeholder="设置数据库表中的列的默认值"/>
                  </el-form-item>
                </el-col>
                <!-- 表单验证 -->
                <el-col :span="12" v-if="[1,8].indexOf(form.type) != -1">
                  <el-form-item prop="rule">
                    <template slot="label">
                      <span>表单验证 </span>
                      <el-tooltip content="表单的验证规则的正则表达式，右侧下拉框可以选择预设规则" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <template slot="default">
                      <el-row :gutter="5">
                        <el-col :span="15">
                          <el-input  tabindex="23" v-model="form.rule" placeholder="输入框验证规则"/>
                        </el-col>
                        <el-col :span="8">
                          <el-select  tabindex="25" v-model="default_rules" @change="setDefaultRule" prop="default_rules" clearable filterable placeholder="请选择">
                            <el-option v-for="(item,index) in ruleList" :key="index" :label="index" :value="item"></el-option>
                          </el-select>
                        </el-col>
                      </el-row>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <!-- 表格显示 -->
                <el-col :span="12">
                  <el-form-item prop="list_show">
                    <template slot="label">
                      <span>表格显示 </span>
                      <el-tooltip content="是否在表格中显示，以及显示方式（居中，居左，居右）" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-select tabindex="27" v-model="form.list_show" filterable placeholder="请选择" style="width: 100%;">
                      <el-option-group label="显示状态">
                        <el-option :key="1" label="不显示" :value="0"></el-option>
                        <el-option :key="2" label="隐藏" :value="1"></el-option>
                      </el-option-group>
                      <el-option-group label="显示位置">
                        <el-option :key="3" label="居中" :value="2"></el-option>
                        <el-option :key="4" label="居左" :value="3"></el-option>
                        <el-option :key="5" label="居右" :value="4"></el-option>
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 显示条件 -->
                <el-col :span="12">
                  <el-form-item prop="show_condition">
                    <template slot="label">
                      <span>表单级联 </span>
                      <el-tooltip content="设置此字段在form表单中什么情况下显示，默认不设置即任何条件下都显示；格式为：form.字段名；比如：form.status == '1'" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="29" v-model="form.show_condition" clearable placeholder="输入框显示条件"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <!-- 表单样式及选项 -->
                <!-- 日期格式 -->
                <el-col :span="12" v-if="[9].indexOf(form.type) != -1">
                  <el-form-item prop="datetime_config">
                    <template slot="label">
                      <span>日期格式 </span>
                      <el-tooltip content="设置日期时间格式" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.datetime_config" @input="selectDate">
                      <el-radio-button label="datetime">年月日时分秒</el-radio-button>
                      <el-radio-button label="date">年月日</el-radio-button>
                      <el-radio-button label="year">年</el-radio-button>
                      <el-radio-button label="month">月</el-radio-button>
                      <el-radio-button label="time">时分秒</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12" v-if="[9,11,12].indexOf(form.type) != -1">
                  <el-form-item prop="datetime_config">
                    <template slot="label">
                      <span>日期搜索</span>
                      <el-tooltip content="设置日期的搜索表单样式，此设置必须是在开启搜索才会生效" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-select clearable v-model="form.other_config.search_type"  @input="selectSearchType"  :disabled="['year','month','time'].indexOf(form.datetime_config) != -1">
                      <el-option label="日期范围(daterange)" value="daterange"></el-option>
                      <el-option label="日期时间范围(datetimerange)" value="datetimerange"></el-option>
                      <el-option label="日期(date)" value="date"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 层级 -->
                <el-col :span="24" v-if="form.type == 22">
                  <el-form-item prop="address_type">
                    <template slot="label">
                      <span>层级 </span>
                      <el-tooltip content="设置省市区显示级别" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.other_config.address_type">
                      <el-radio-button :label="1">省市区</el-radio-button>
                      <el-radio-button :label="2">省市</el-radio-button>
                      <el-radio-button :label="3">省</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 上传样式 -->
                <el-col :span="24" v-if="form.type == 13">
                  <el-form-item  prop="upload_type" >
                    <template slot="label">
                      <span>上传样式 </span>
                      <el-tooltip content="选择上传组件的样式" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.other_config.upload_type">
                      <el-radio-button :label="1">缩略图</el-radio-button>
                      <el-radio-button :label="2">图片列表</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 长度 -->
                <el-col :span="24" v-if="form.type == 31">
                  <el-form-item prop="rand_length">
                    <template slot="label">
                      <span>长度 </span>
                      <el-tooltip content="定义随机数的长度" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="37" v-model="form.other_config.rand_length" clearable placeholder="随机数长度"/>
                  </el-form-item>
                </el-col>
                <!-- 选项配置 -->
                <el-col :span="24" v-if="list_item && form.type != 35">
                  <el-form-item prop="item_config">
                    <template slot="label">
                      <span>选项配置 </span>
                      <el-tooltip content="选择预设值或者点击追加自定义" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <template slot="default">
                      <el-row v-for="(item,i) in form.item_config" :key="i">
                        <el-col :span="8">
                          <el-form-item class="activeItem">
                            <el-input :tabindex="toString(39 * i)" v-model="item.label" placeholder="选项名称"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item class="activeItem">
                            <el-input :tabindex="toString(39 * i + 1)" style="position:relative;left:5px;" v-model="item.value" placeholder="选项值"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item class="activeItem">
                            <el-select tabindex="43" style="position:relative;left:10px;" v-model="item.label_color" clearable placeholder="请选择背景色">
                              <el-option key="1" style="background:#409eff" label="primary" value="primary"></el-option>
                              <el-option key="2" style="background:#67c23a" label="success" value="success"></el-option>
                              <el-option key="3" style="background:#909399" label="info" value="info"></el-option>
                              <el-option key="4" style="background:#e6a23c" label="warning" value="warning"></el-option>
                              <el-option key="5" style="background:#f56c6c" label="danger" value="danger"></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="2">
                          <el-button  tabindex="45" type="danger" style="position:relative;left:15px" icon="el-icon-close" @click="deleteItem('item_config',i)"></el-button>
                        </el-col>
                      </el-row>
                      <div>
                        <el-button tabindex="47" type="success" icon="el-icon-plus" @click="addItem('item_config')">追加</el-button>
                        <el-button tabindex="49" v-if="form.item_config.length > 0" type="warning" icon="el-icon-delete" @click="clearItem('item_config')">清空</el-button>
                        <el-select  tabindex="51" v-if="form.item_config.length === 0" style="height:25px;margin-left:5px;" v-model="default_config" @change="setDefaultItem" placeholder="请选择默认配置">
                          <el-option v-for="(item,i) in itemList" :key="i" :label="item.name" :value="item.item"></el-option>
                        </el-select>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
                <!-- SQL数据源 -->
                <el-col :span="24" v-if="list_item && [6,35].indexOf(form.type) == -1">
                  <el-form-item prop="sql">
                    <template slot="label">
                      <span>SQL数据源 </span>
                      <el-tooltip content="支持基本查询，键值对查询，带有别名的查询，注意查询列的顺序: 主键 + 名称 + 父id" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="53" type="textarea" v-model="form.sql" clearable placeholder="单选/下拉/多选选项 sql数据源"/>
                    <span style="color: green;font-size: 0.8em;">{{sql_content}}</span>
                  </el-form-item>
                </el-col>
                <!-- 相关字段 -->
                <el-col :span="24"  v-if="list_item && [6,35].indexOf(form.type) == -1 && form.sql">
                  <el-form-item prop="dependent">
                    <template slot="label">
                      <span>相关字段 </span>
                      <el-tooltip content="请填写上述查询需要额外根据哪个字段进行数据过滤，此为表单级联设置，如各个字段间无关联，此处留空即可" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <template slot="default">
                      <el-select tabindex="55" v-model="jump_index" @change="changeIndex" placeholder="请选择表" style="width: 30%;">
                        <el-option v-for="(item,index) in url" :key="item.value" :label="item.title" :value="index"></el-option>
                      </el-select>
                      <el-select tabindex="57" style="width:30%" v-model="form.dependent" filterable clearable placeholder="请选择此查询需要额外根据哪个字段过滤选项">
                        <el-option v-for="(vo,i) in jump_model_fields" :key="i" :value="vo.field"> {{ vo.title }}({{ vo.field }})</el-option>
                      </el-select>
                    </template>
                  </el-form-item>
                </el-col>
                <!-- Service数据源 -->
                <el-col :span="24" v-if="list_item && form.type == 35 && form.type != 6 ">
                  <el-form-item prop="sql">
                    <template slot="label">
                      <span>数据源 </span>
                      <el-tooltip content='格式：{"Function":"function_name","Label":"label","Children":"children","Key":"key"}' placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="59" type="textarea" v-model="form.sql" clearable placeholder='格式：{"Function":"服务函数名","Label":"显示字段","Children":"子字段名","Key":"保存字段名"}'/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="其他配置" name="second">
              <el-row :gutter="10" v-if="menu.page_type != 2 && [1,2,3,4,5,6,8,9,10,11,12,17,19,22,26,27,28,31,32,34,29].indexOf(form.type) != -1">
                <!-- 前端排序 -->
                <el-col :span="8">
                  <el-form-item prop="sortable">
                    <template slot="label">
                      <span>前端排序 </span>
                      <el-tooltip content="对数据表中当前页中显示的数据进行前端排序" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.sortable" :disabled="[1,2,3,4,5,6,8,9,11,12,17,19,29,31,32,34].indexOf(form.type) == -1">
                      <el-radio-button :label="1">排序</el-radio-button>
                      <el-radio-button :label="0">取消</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 快速编辑 -->
                <el-col :span="8" v-if="[1,2,3,4,5,6,8,9,17,29].indexOf(form.type) != -1">
                  <el-form-item prop="editable">
                    <template slot="label">
                      <span>快速编辑 </span>
                      <el-tooltip content="通过双击单元格即可对数据表中的数据进行编辑，仅对特定数据类型有效" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.editable">
                      <el-radio-button :label="1">编辑</el-radio-button>
                      <el-radio-button :label="0">取消</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 前端筛选 -->
                <el-col :span="8">
                  <el-form-item label="前端筛选" prop="is_filter">
                    <template slot="label">
                      <span>前端筛选 </span>
                      <el-tooltip content="对数据表中当前页中显示的数据进行前端筛选（仅做字符串匹配）" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.is_filter" :disabled="[1,2,3,4,5,6,8,9,10,11,12,17,19,22,26,27,28,31,32,34,29].indexOf(form.type) == -1">
                      <el-radio-button :label="1">筛选</el-radio-button>
                      <el-radio-button :label="0">取消</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 筛选方法 -->
                <el-col :span="12" v-if="menu.page_type != 2 && form.is_filter == 1 && [2,3,4,5,6].indexOf(form.type) == -1">
                  <el-form-item prop="filter_method">
                    <template slot="label">
                      <span>筛选方法 </span>
                      <el-tooltip content="选择筛选数据的规则，推荐模糊匹配，若选择精确匹配则需要配置需要匹配哪些数据" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-radio-group v-model="form.filter_method">
                      <el-radio-button :label="1">精确匹配</el-radio-button>
                      <el-radio-button :label="2">模糊查询</el-radio-button>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <!-- 筛选项 -->
                <el-col :span="12" v-if="menu.page_type != 2 && form.is_filter == 1 && form.filter_method == 1 ">
                  <el-form-item label="筛选项" prop="filter_condition">
                    <template slot="label">
                      <span>筛选项 </span>
                      <el-tooltip content="配置筛选条件,筛选只能用于列表" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <template slot="default">
                      <el-row v-for="(item,i) in form.filter_condition" :key="i">
                        <el-col :span="8">
                          <el-form-item class="activeItem">
                            <el-input tabindex="65" v-model="item.label" placeholder="选项名称"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="6">
                          <el-form-item class="activeItem">
                            <el-input  tabindex="67" style="position:relative;left:5px;" v-model="item.value" placeholder="选项值"/>
                          </el-form-item>
                        </el-col>
                        <el-col :span="2">
                          <el-button tabindex="69" type="danger" style="position:relative;left:15px" icon="el-icon-close" @click="deleteItem('filter_condition',i)"></el-button>
                        </el-col>
                      </el-row>
                      <div>
                        <el-button tabindex="71" type="success" icon="el-icon-plus" style="padding:5px 7px" @click="addItem('filter_condition')">追加</el-button>
                        <el-button tabindex="73" v-if="form.filter_condition.length > 0" type="warning" icon="el-icon-delete" style="padding:5px 7px" @click="clearItem('filter_condition')">清空</el-button>
                        <el-select  tabindex="75" v-if="form.filter_condition.length === 0" style="height:25px; light:25px; margin-left:20px;" v-model="default_condition" @change="setDefaultItemFilter" placeholder="请选择默认配置">
                          <el-option v-for="(item,i) in itemList" :key="i" :label="item.name" :value="item.item"></el-option>
                        </el-select>
                      </div>
                    </template>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10">
                <!-- 最大输入 -->
                <el-col :span="12" v-if="form.type ==1">
                  <el-form-item prop="input_length">
                    <template slot="label">
                      <span>最大输入 </span>
                      <el-tooltip content="字段的最大输入长度" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="77" v-model="form.other_config.input_length" placeholder="请输入长度">
                      <el-button type="success" style="height: 20px;" slot="append">个字符</el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- 背景色 -->
                <el-col :span="12" v-if="form.type == 1">
                  <el-form-item prop="label_color">
                    <template slot="label">
                      <span>背景色 </span>
                      <el-tooltip content="选择任何颜色，都表示此字段将以标签的形式显示，选中的颜色为其背景色" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-select
                        style="width:100%" v-model="form.other_config.label_color" clearable
                        filterable placeholder="请选择" tabindex="79">
                      <el-option key="1" style="background:#409eff" label="primary" value="primary"></el-option>
                      <el-option key="2" style="background:#67c23a" label="success" value="success"></el-option>
                      <el-option key="3" style="background:#909399" label="info" value="info"></el-option>
                      <el-option key="4" style="background:#e6a23c" label="warning" value="warning"></el-option>
                      <el-option key="5" style="background:#f56c6c" label="danger" value="danger"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <!-- 输入前缀 -->
                <el-col :span="12"  v-if="form.type == 1">
                  <el-form-item label="输入前缀" prop="prefix">
                    <template slot="label">
                      <span>输入前缀 </span>
                      <el-tooltip content="输入框前面自动添加的前缀" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="82" v-model="form.other_config.prefix" placeholder="请输入前缀"/>
                  </el-form-item>
                </el-col>
                <!-- 输入后缀 -->
                <el-col :span="12" v-if="form.type == 1">
                  <el-form-item prop="afterfix">
                    <template slot="label">
                      <span>输入后缀 </span>
                      <el-tooltip content="输入框末尾自动添加的后缀" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="83" v-model="form.other_config.afterfix" placeholder="请输入后缀"/>
                  </el-form-item>
                </el-col>
                <!-- 前置图标 -->
                <el-col :span="12" v-if="form.type == 1">
                  <el-form-item prop="pre_icon">
                    <template slot="label">
                      <span>前置图标 </span>
                      <el-tooltip content="输入框的图标，点击“请选择”进行选择" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="83" v-model="form.other_config.pre_icon" placeholder="输入框前置图标" clearable>
                      <el-button type="success" slot="append" icon="el-icon-thumb" style="height: 20px;" @click="iconOpen('pre_icon')">请选择</el-button>
                    </el-input>
                  </el-form-item>
                </el-col>
                <!-- 字段说明 -->
                <el-col :span="24">
                  <el-form-item prop="note">
                    <template slot="label">
                      <span>字段说明 </span>
                      <el-tooltip content="记录设计人员对字段的备忘信息" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="85" v-model="form.note" clearable type="textarea" placeholder="字段说明"/>
                  </el-form-item>
                </el-col>
                <!-- 表单说明 -->
                <el-col :span="24">
                  <el-form-item prop="desc">
                    <template slot="label">
                      <span>表单说明 </span>
                      <el-tooltip content="添加/修改表单中，显示对字段的解释性信息" placement="top-start">
                        <i class="el-icon-warning-outline"></i>
                      </el-tooltip>
                    </template>
                    <el-input tabindex="87" v-model="form.desc" clearable type="textarea" placeholder="表单输入说明,将生成到录入表单"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-form>
      </template>
      <!--底部-->
      <template #footer>
        <el-button :size="size" :loading="loading" type="primary" @click="submit">
          <span v-if="!loading">确 定</span><span v-else>提 交 中...</span>
        </el-button>
        <el-button :size="size" @click="closeForm">取 消</el-button>
      </template>
    </vxe-modal>
    <Icon :iconshow.sync="iconDialogStatus" :currentIconModel.sync="currentIconModel" @selectIcon="selectIcon" size="small"></Icon>
  </div>
</template>

<script>
import {updateField, getConfigList, getTablesByMenuId, getUrl, getPostField} from '../../sys'
import Icon from '@/components/common/Icon.vue'

export default {
  name: 'updateField',
  components: {Icon},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'mini'
    },
    field: {
      type: Array,
    },
    info: {
      type: Object,
    },
    itemList: {
      type: Array,
    },
    menu: {
      type: Object,
    }
  },
  data() {
    return {
      form: {
        title: null,
        field: null,
        type: null,
        rule: null,
        note: null,
        width: 80,
        post_status: 1,
        create_table_field: 1,
        list_show: 3,
        menu_id: null,
        validate: [],
        datatype: '',
        length: '',
        belong_table: '',
        default_value: '',
        sortable: 0,
        show_condition: null,
        // is_partial: 0,
        datetime_config: null,
        indexdata: null,
        is_filter: 0,
        filter_condition: [],
        filter_method: '',
        editable: 0,
        sql: '',
        dependent: '',
        desc: null,
        item_config: [],
        other_config: {
          pre_icon: '',
          afterfix: '',
          prefix: '',
          label_color: null,
          input_length: null,
          rand_length: null,
          upload_type: null,
          address_type: 1,
          search_type: 'daterange',
        },
      },
      iconDialogStatus: false,
      currentIconModel: '',
      activeName: 'first',
      loading: false,
      list_item: false,
      propertyField: [],
      default_config: '',
      default_condition: '',
      default_rules: '',
      ruleList: [],
      tableList: [],
      rules: {
        title: [{required: true, message: '字段中文名不能为空', trigger: 'blur'}],
        field: [{required: true, message: '字段英文名不能为空', trigger: 'blur'}],
        type: [{required: true, message: '字段类型不能为空', trigger: 'blur'}],
        login_fields: [{required: true, message: '请配置登录账号密码字段', trigger: 'blur'}],
      },
      jump_index: 0,
      jump_model_fields: [],
      url: [],
      sql_content: '',
    }
  },
  methods: {
    submit() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          this.loading = true
          this.form.menu_id = this.menu.menu_id
          this.form.sql = this.form.sql ? this.form.sql.replace(/'/g,'"') : ''
          // console.log('this.form: ',this.form)
          updateField(this.form).then(res => {
            if (res.status == '200') {
              this.$message({message: '修改成功', type: 'success'})
              this.$emit('refesh_list')
              this.closeForm()
            } else {
              this.loading = false
            }
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    open() {
      this.sql_content = '1. 普通下拉例子： select category_id, name from cd_category where status = 1 \n';
      this.sql_content += '2. 树形下拉例子： select category_id, name, pid from cd_category where status = 1 \n';
      this.sql_content += '3. 复杂查询例子： select expression_1 as category_id, expression_2 as name from cd_category where status = 1 \n';
      this.sql_content += "4. 字典查询例子： select data from cd_admin_config where name = \"hobby\"";
      // console.log(this.info)
      this.form = this.info
      if (this.form.other_config == '' || this.form.other_config == '[]' || this.form.other_config == null) {
        this.form.other_config = {}
      } else {
        this.form.other_config = this.info.other_config ? JSON.parse(this.info.other_config) : {}
      }
      this.setDefaultVal('item_config')
      this.setDefaultVal('filter_condition')
      this.field.forEach(item => {
        if (this.form.type == item.type) {
          this.list_item = item.item
        }
      })
      getConfigList().then(res => {
        this.ruleList = res.ruleList
        this.propertyField = res.propertyField
      })
      getUrl().then(res => {
        this.url = res.data
      })
    },
    changeIndex(){
      getPostField({menu_id: this.url[this.jump_index].menu_id}).then(res=>{
        this.jump_model_fields = res.model_fields
      })
    },
    selectType() {
      this.field.forEach(item => {
        if (this.form.type == item.type) {
          this.propertyField.forEach(vo => {
            if (item.property == vo.type) {
              this.form.datatype = vo.name
              this.form.length = vo.maxlen
            }
          })
          this.list_item = item.item
          if (!item.item) {
            this.form.item_config = []
          }
        }
      })
      //console.log(this.form.type)
      //console.log(this.list_item)
    },
    setDefaultRule() {
      this.form.rule = this.default_rules
    },
    setFieldLength() {
      this.propertyField.forEach(item => {
        if (this.form.datatype == item.name) {
          this.form.length = item.maxlen
        }
      })
    },
    addItem(key) {
      this.setDefaultVal(key)
      this.form[key].push({})
    },
    deleteItem(key, index) {
      this.form[key].splice(index, 1)
    },
    clearItem(key) {
      this.form[key] = []
    },
    setDefaultItem(val) {
      this.form['item_config'] = val
    },
    setDefaultItemFilter(val) {
      this.form['filter_condition'] = val
    },
    setDefaultVal(key) {
      if (this.form[key] == null || this.form[key] == '') {
        this.form[key] = []
      }
    },
    iconOpen(model) {
      this.iconDialogStatus = true
      this.currentIconModel = model
    },
    selectIcon(icon) {
      //console.log(icon)
      this.form.other_config.pre_icon = icon
    },
    getTablesByMenuId() {
      getTablesByMenuId({menu_id: this.menu.menu_id}).then(res => {
        this.tableList = res.data
      })
    },
    setPostStatus() {
      this.form.post_status = 0
    },
    selectDate(val) {
      if (['year', 'month', 'time', 'dates'].includes(val)) {
        this.form.datatype = 'varchar'
        this.form.length = 250
      } else {
        this.form.datatype = 'datetime'
        this.form.length = ''
      }
    },
    selectSearchType(value){
      this.form.other_config.search_type = value;
    },
    checkDefault(val){
      val.find((item)=>{
        if(item == 'unique'){
          if(this.form.default_value){
            this.$message({message: '已清空默认值设置', type: 'warning'})
            this.form.default_value = ''
          }
        }
      })
    },
    closeForm() {
      this.$emit('update:show', false)
      this.loading = false
      this.$refs['form'].resetFields()
      this.$nextTick(() => {
        this.default_rules = ''
        this.form.other_config = {}
      })
    }
  },
}
</script>
<style scoped>
.activeItem {
  margin-bottom: 3px
}

.el-checkbox-group li {
  float: left;
  margin-left: 10px;
  width: 150px;
  margin-top: 10px
}

.el-tabs--card {
  height: calc(80vh - 170px);
}
.el-tab-pane {
  height: calc(80vh - 170px);
  overflow-y: auto;
}
</style>
